---
description: Компонент для создания визуально выделенных контейнеров с содержимым.
---

<Overview group="data-display">

# Card [tag:component]

Компонент для создания визуально выделенных контейнеров с содержимым. Обеспечивает семантически правильную
разметку по умолчанию и различные варианты стилевого оформления.

Связанные компоненты:

- [CardGrid](/components/card-grid)
- [CardScroll](/components/card-scroll)

</Overview>

<Playground>
  ```jsx
  <Card>
    <Div>
      <Text>Содержимое карточки</Text>
    </Div>
  </Card>
  ```
</Playground>

## Основные возможности

### Семантическая разметка

Компонент поддерживает следующие возможности:

- использование семантически правильного тега `<li>` по умолчанию;
- возможность изменения тега через свойство `Component` для одиночных карточек вне списков;
- поддержка `ARIA`-ролей для улучшения доступности.

```jsx
// Карточка в списке
<Card>
  <Text>Элемент списка</Text>
</Card>

// Одиночная карточка
<Card Component="div">
  <Text>Отдельная карточка</Text>
</Card>
```

## Режимы отображения

Задаётся свойством `mode`.

<Playground>
  ```jsx
  <Card mode="tint">
    <Div>
      <Text>mode="tint"</Text>
    </Div>
  </Card>
  <Card mode="shadow">
    <Div>
      <Text>mode="shadow"</Text>
    </Div>
  </Card>
  <Card mode="outline">
    <Div>
      <Text>mode="outline"</Text>
    </Div>
  </Card>
  <Card mode="outline-tint">
    <Div>
      <Text>mode="outline-tint"</Text>
    </Div>
  </Card>
  <Card mode="plain">
    <Div>
      <Text>mode="plain"</Text>
    </Div>
  </Card>
  ```
</Playground>

## Доступность (a11y) [#a11y]

Компонент обеспечивает базовую доступность через семантически правильную разметку.
При необходимости можно:

- изменить тег через свойство `Component`;
- добавить ARIA-роли для улучшения доступности;
- настроить дополнительные атрибуты для конкретных сценариев использования.

## Свойства и методы [#api]

<PropsTable name="Card" />
